import * as base from "./base.js";
import instance from './request.js';
import { $, $$ } from './base.js';

window.addEventListener('load', function () {
    //跳转到发布房源页面
    if (localStorage.getItem('identity') == 2) {
        $('.add_fangyuan').style.display = 'block';
    }

    base.navbox();
    base.avatarimg();


    let avatarUrl = 0;

    let userid = localStorage.getItem('userid');
    instance.get(`/user/${userid}`, {
        headers: {
            'Authorization': window.localStorage.getItem('token'),
            'Content-Type': 'application/json',
        }
    }).then(response => {
        let userarr = response.data.data;
        console.log(userarr);
        $('.lodger_name').innerHTML = userarr.username;
        $('.lodger_l_b_t_span').innerHTML = userarr.username;
        $('.lodger_gain h2 span').innerHTML = userarr.username;

        if (!(userarr.avatarUrl || userarr.career || userarr.pet || userarr.profile || userarr.school || userarr.skill)) {
            $('.lodger_r').style.display = 'flex';
        } else {
            $('.lodger_gain').style.display = 'block';
            if (userarr.avatarUrl) {
                $('.lodger_img img').src = userarr.avatarUrl;
                $('.editorbody_l img').src = userarr.avatarUrl;
                avatarUrl = userarr.avatarUrl;
            }
            if (userarr.pet) {
                $('.gain_pet').innerHTML = userarr.pet;
                $$('.grid-item-con1')[0].style.display = 'none';
                $$('.grid-item-con2')[0].style.display = 'block';
                $$('.grid-item-con2 span')[0].innerHTML = userarr.pet;
            } else {
                $('.gain_pet').innerHTML = '无';
            }
            if (userarr.career) {
                $('.gain_career').innerHTML = userarr.career;
                $$('.grid-item-con1')[1].style.display = 'none';
                $$('.grid-item-con2')[1].style.display = 'block';
                $$('.grid-item-con2 span')[1].innerHTML = userarr.career;
            } else {
                $('.gain_personal').innerHTML = '无';
            }
            if (userarr.school) {
                $('.gain_school').innerHTML = userarr.school;
                $$('.grid-item-con1')[2].style.display = 'none';
                $$('.grid-item-con2')[2].style.display = 'block';
                $$('.grid-item-con2 span')[2].innerHTML = userarr.school;
            } else {
                $('.gain_school').innerHTML = '无';
            }
            if (userarr.skill) {
                $('.gain_skill').innerHTML = userarr.skill;
                $$('.grid-item-con1')[3].style.display = 'none';
                $$('.grid-item-con2')[3].style.display = 'block';
                $$('.grid-item-con2 span')[3].innerHTML = userarr.skill;
            } else {
                $('.gain_skill').innerHTML = '无';
            }
            if (userarr.profile) {
                $('.gain_personal').innerHTML = userarr.profile;
                $('.add_personal').innerHTML = userarr.profile;
                $('.add_profile').innerHTML = '编辑个人信息';
            } else {
                $('.gain_personal').innerHTML = '无';
            }


        }

    })

    //图片加载不出来
    $('.lodger_img img').addEventListener('error', function () {
        $('.lodger_img img').src = avatarUrl;
    })
    $('.editorbody_l img').addEventListener('error', function () {
        $('.editorbody_l img').src = avatarUrl;
    })





    //没创建个人信息跳转到创建个人信息
    $('.create_lodger').addEventListener('click', function () {
        $('.lodger').style.display = 'none';
        $('.editor').style.display = 'block';
    })

    //编辑个人信息按钮
    $('.gain_editor').addEventListener('click', function () {
        $('.lodger').style.display = 'none';
        $('.editor').style.display = 'block';
    })

    //返回个人资料页
    $('.editor_wish').addEventListener('click', function () {
        $('.lodger').style.display = 'flex';
        $('.editor').style.display = 'none';
    })



    document.addEventListener("click", function (event) {
        const targetElement = event.target;

        if (targetElement.classList.contains('grid-item-mask')) {

            switch (targetElement.parentNode.getAttribute('id')) {
                case "1":
                    $('.editorbox_mt1').innerHTML = '你养宠物吗？';
                    $('.editorbox_mt2').innerHTML = '介绍一下你养的宠物及其名字。例如：「我的三色猫叫 Whiskers」或「我的乌龟叫 Leonardo，游得特别快」。';
                    $('.editorbox_m_name').innerHTML = '宠物：';
                    break;
                case "2":
                    $('.editorbox_mt1').innerHTML = '你做什么工作？';
                    $('.editorbox_mt2').innerHTML = '介绍一下你的职业。如果你并没有一份传统意义上的工作，也可以分享一下你的人生追求。例如：「护士」、「退役冲浪运⁠动⁠员」等。';
                    $('.editorbox_m_name').innerHTML = '我的职业：';
                    $('.max_num').innerHTML = 20;
                    break;
                case "3":
                    $('.editorbox_mt1').innerHTML = '你曾在哪里上学？';
                    $('.editorbox_mt2').innerHTML = '介绍一下你曾就读的学校，在家学习、高中或职业学校等都可以。';
                    $('.editorbox_m_name').innerHTML = '曾经就读的学校：';
                    break;
                case "4":
                    $('.editorbox_mt1').innerHTML = '你最无用的技能是什么？';
                    $('.editorbox_mt2').innerHTML = '介绍一下你有什么出人意料又意义不大的才艺。示例：「单手洗牌」。';
                    $('.editorbox_m_name').innerHTML = '我最无用的技能：';
                    break;
            }

            $('.editormask').style.display = 'block';
            $('.editorbox').style.display = 'block';
            $('.editorbox').classList.add('slidedownup');

            $('.editorbox_save').onclick = function () {
                if ($('.editorbox_m_t input').value) {
                    targetElement.parentNode.children[1].children[1].style.display = 'none';
                    targetElement.parentNode.children[1].children[2].style.display = 'block';
                    targetElement.parentNode.children[1].children[2].children[0].innerHTML = $('.editorbox_m_t input').value;
                    $('.editorbox_m_t input').value = '';
                    $('.editorbox_m_t input').blur();
                    $('.editorbox_m_name').style.transform = 'scale(1) translateX(0px) translateY(0px)';
                    $('.editormask').click();
                }
            }
        }


    });

    //关闭
    $('.editormask').addEventListener('click', function () {
        $('.editorbox').style.display = 'none';
        $('.editormask').style.display = 'none';

        $('.editorbox_m_t input').value = '';
        $('.editorbox_m_t input').blur();
        $('.editorbox_m_name').style.transform = 'scale(1) translateX(0px) translateY(0px)';

        $('.add_delete_wish_close').click();
    })

    $('.delete_wish_close').addEventListener('click', function () {
        $('.editormask').click();
    })





    $('.editorbox_m_t input').addEventListener('focus', function () {
        $('.editorbox_m_name').style.transform = 'scale(0.8) translateX(-10px) translateY(-15px)';
        $('.editorbox_m_t').style.border = '1px solid #222';
    })
    $('.editorbox_m_t input').addEventListener('blur', function () {
        $('.editorbox_m_t').style.border = '1px solid #b0b0b0';
        if (!($('.editorbox_m_t input').value)) {
            $('.editorbox_m_name').style.transform = 'scale(1) translateX(0px) translateY(0px)';
        }
    })

    //限制字数
    $('.editorbox_m_t input').addEventListener('input', function () {
        const count = $('.editorbox_m_t input').value.length;
        $('.min_num').textContent = count;

        if (count >= parseInt($('.max_num').textContent)) {
            // 如果超过最大字数限制，则截断输入
            $('.editorbox_m_t input').value = $('.editorbox_m_t input').value.slice(0, parseInt($('.max_num').textContent - 1));
        }
    });

    $('.personalbox_m_t textarea').addEventListener('input', function () {
        const count = $('.personalbox_m_t textarea').value.length;
        $('.add_wishcreate_m_b .min_num').textContent = count;

        if (count >= parseInt($('.add_wishcreate_m_b .max_num').textContent)) {
            // 如果超过最大字数限制，则截断输入
            $('.personalbox_m_t textarea').value = $('.personalbox_m_t textarea').value.slice(0, parseInt($('.add_wishcreate_m_b .max_num').textContent - 1));
        }
    });



    //个人简历
    $('.add_profile').addEventListener('click', function () {
        $('.editormask').style.display = 'block';
        $('.personalbox').style.display = 'block';
        $('.personalbox').classList.add('slidedownup');
    })

    $('.add_delete_wish_close').addEventListener('click', function () {
        $('.editormask').style.display = 'none';
        $('.personalbox').style.display = 'none';
    })


    $('.add_save').addEventListener('click', function () {
        if ($('.personalbox_m_t textarea').value) {
            console.log(1);
            $('.add_personal').innerHTML = $('.personalbox_m_t textarea').value;
            $('.add_profile').innerHTML = '编辑个人信息';
            personal = $('.personalbox_m_t textarea').value;
        } else {
            $('.add_personal').innerHTML = '写一些有趣又有吸引力的内容。';
            $('.add_profile').innerHTML = '添加个人简历';
            personal = '';
        }

        $('.add_delete_wish_close').click();
    })


    $('.personalbox_m_t textarea').addEventListener('focus', function () {
        $('.personalbox_m_t').style.border = '1px solid #222';
    })
    $('.personalbox_m_t textarea').addEventListener('blur', function () {
        $('.personalbox_m_t').style.border = '1px solid #b0b0b0';
    })



    //修改个人信息
    let personal = '';
    $('.complete').addEventListener('click', base.debounce(function () {
        instance.post('/user', {
            "profile": `${personal}`,
            "pet": `${$$('.grid-item-con2 span')[0].innerHTML}`,
            "career": `${$$('.grid-item-con2 span')[1].innerHTML}`,
            "school": `${$$('.grid-item-con2 span')[2].innerHTML}`,
            "skill": `${$$('.grid-item-con2 span')[3].innerHTML}`
        }, {
            headers: {
                'Authorization': window.localStorage.getItem('token'),
                'Content-Type': 'application/json',
            }
        }).then(response => {
            console.log(response);


            location.reload(true);

        }).catch(error => {
            console.error(error)
        })
    })
    )


    //上传头像
    $(".camera").addEventListener('change', () => {
        const fileInput = $('.camera input'); // 替换为您的文件输入元素
        const formData = new FormData();
        formData.append('avatar', fileInput.files[0]);


        // 发送 POST 请求
        instance.post('/avatar', formData, {
            headers: {
                'Authorization': window.localStorage.getItem('token'),
                'Content-Type': 'multipart/form-data'
            }
        })
            .then(response => {
                // 处理上传成功后的响应数据
                console.log('上传成功:', response);
                $('.nav-r-2-svg2 img').src = userarr.avatarUrl;
                $('.editorbody_l img').src = response.data.data.avatarUrl;
            })
            .catch(error => {
                // 处理上传失败的情况
                console.error('上传失败:', error);
            });
    });
})